let search_icon = document.getElementsByClassName('search_icon')[0]

let search_input = document.getElementsByClassName('search_input')[0]

let mask = document.getElementsByClassName('mask')[0]

let mask2 = document.getElementsByClassName('mask')[1]


let hexadecimal_arr = ['a', 'b', 'c', 'd', 'e', 'f']

for (let i = 0; i < 10; i++) {
    hexadecimal_arr.push(i)
}

console.log(hexadecimal_arr);

let is_show = false

search_icon.onclick = function() {
    let color1 = getColor()
    let color2 = getColor()

    if (is_show) {
        let mask_bg = `linear-gradient(${Math.floor(Math.random() * 361)}deg, ${color1}, ${color2})`
        let mask2_bg = mask2.style.background

        // 遮罩层的背景色互换  外面关闭动画时的遮罩层是新背景色  里面要被关闭的遮罩层是旧背景色 
        mask2.style.background = mask_bg
        mask.style.background = mask2_bg

        // 在动画结束在给展示的遮罩层添加新颜色
        setTimeout(() => {
            mask.style.background = mask_bg
        }, 1500);
        mask.style.zIndex = '4'
        mask.classList.add('close')
        mask2.classList.remove('show')
        search_input.classList.remove('show')

    } else {
        mask2.style.background = `linear-gradient(${Math.floor(Math.random() * 361)}deg, ${color1}, ${color2})`
        mask.style.zIndex = '-1'
        mask2.classList.add('show')
        mask.classList.remove('close')
        search_input.classList.add('show')
    }


    is_show = !is_show
}


function getColor() {
    let color = '#'
    for (let i = 0; i < 6; i++) {
        let index = Math.floor(Math.random() * hexadecimal_arr.length)
        color += hexadecimal_arr[index]
    }
    return color
}

console.log(getColor());